@import "common";

body {
    background-color: #ccc;
}

.canvasGL {
    display: block;
    width: 100vw;
    height: 100vh;
    border-radius: 7px;
    border-radius: 30px;
    border: 20px solid transparent;

    .fs & {
        border-radius: 0;
        border: none;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }
}

.controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 20px;
    padding: 20px;
    padding-top: 60px;
    opacity: 0.88;

    @media(min-width: $screen-sm-min) {
        padding-top: 20px;
        padding-left: 50px;
    }

    .fs & {
        padding: 0;
        padding-top: 60px;

        @media(min-width: $screen-sm-min) {
            padding-top: 0;
            padding-left: 30px;
        }
    }

    .control-label {
        color: #fff;
        text-shadow: rgb(3, 3, 3) 0px 0px 8px;
        padding-top: 0;
    }

    .slider {
        min-width: 100%;
    }
}

.control-icon {
    position: absolute;

    .material-icons {
        color: #fff;
        text-shadow: rgb(3, 3, 3) 0px 0px 8px;
    }

    &.control-fs {
        right: 40px;
        top: 40px;

        .icon-enter-fs {
            display: inline-block;
        }

        .icon-exit-fs {
            display: none;
        }

        .fs & {
            right: 20px;
            top: 20px;

            .icon-enter-fs {
                display: none;
            }

            .icon-exit-fs {
                display: inline-block;
            }
        }
    }

    &.control-settings {
        left: 40px;
        top: 40px;

        .icon-show-settings {
            display: inline-block;
        }

        .icon-hide-settings {
            display: none;
        }

        .fs & {
            left: 20px;
            top: 20px;
        }

        &.open {
            .icon-show-settings {
                display: none;
            }

            .icon-hide-settings {
                display: inline-block;
            }
        }
    }

    &.control-previous {
        left: 40px;
        top: 50%;
    }

    &.control-next {
        right: 40px;
        top: 50%;
    }
}

.material-icons {
    &.md-18 {
        font-size: 18px;
    }
    &.md-24 {
        font-size: 24px;
    }
    &.md-36 {
        font-size: 36px;
    }
    &.md-48 {
        font-size: 48px;
    }
}
